<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="second_list_body">
      <div class="second_list">
        <div
          class="second_list_item"
          v-for="(item, index) in secondList"
          :key="index"
          @click="toVideoListFn(item.key)"
        >
          <img
            v-if="item.key == 1"
            class="second_list_item_img"
            src="../../assets/image/course_bg01.png"
          />
          <img
            v-if="item.key == 2"
            class="second_list_item_img"
            src="../../assets/image/course_bg02.png"
          />
          <img
            v-if="item.key == 3"
            class="second_list_item_img"
            src="../../assets/image/course_bg03.png"
          />
          <img
            v-if="item.key == 4"
            class="second_list_item_img"
            src="../../assets/image/course_bg04.png"
          />
          <div class="second_list_item_title">
            {{ item.key + "." + item.title }}
          </div>
        </div>
      </div>
    </div>
    <HomeFooter :activeKey="activeKey"></HomeFooter>
  </div>
</template>
<style src="../../assets/css/course/secondLevelList.css" scoped></style>

<script>
import HomeFooter from "@/components/homeFooter.vue";
import HomeTop from "@/components/homeTop.vue";
import CourseListData from "../../../public/data/course.json";

export default {
  name: "SecondLevelList",
  components: {
    HomeFooter,
    HomeTop,
  },
  data() {
    return {
      activeKey: 1,
      topTitle: "",
      listShowData: [], // 列表数据
      levelId: "", // 一级Id
      secondList: [],
    };
  },
  created: function () {
    let v = this.$route.params.levelId;
    if (v != undefined && v != "") {
      this.levelId = v;
      this.$store.commit("set_checkedLevelId", v);
    } else {
      this.levelId = this.$store.state.checkedLevelId;
    }
    this.setListFn(this.levelId);
  },
  methods: {
    // 设置列表数据
    setListFn: function (id) {
      let that = this;
      let data = CourseListData.data;
      let list = [];
      data.forEach(function (item) {
        if (item.key == id) {
          list = item.children;
          that.topTitle = item.title;
        }
      });
      list.forEach(function (item) {
        let obj = {
          key: item.key,
          title: item.value,
        };
        that.secondList.push(obj);
      });
    },
    // 选择视频列表
    toVideoListFn: function (secondId) {
      this.$router.push({
        name: "VideoList",
        params: { secondId: secondId },
      });
    },
  },
};
</script>
